<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body,html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 1200px;
            height: 500px;
            position: absolute;
            top: 0;
            left:0;
            right: 0;
            bottom: 0;
            margin:auto;
            font-size: 0;
            overflow: hidden;
            box-shadow: -20px 0 20px black;
        }

        img{
            width: 720px;
            height: 100%;
            border: 5px solid white;
        }

        .img {
            position: relative;
            float: left;
            height: 500px;
            width: 240px;
            -webkit-transition: width .4s linear;
            box-shadow: -20px 0 20px black;
        }

        .text {
            position: absolute;
            height: 60px;
            width: 720px;
            background-color: rgba(0,0,0,0.4);
            bottom: 0;
            font-size: 30px;
            padding: 10px;
            color:#fff;
            box-sizing: border-box;
        }

        .img div {
            -webkit-transition: all .4s linear;
        }

        .img div:hover {
            height: 100%;
        }

        #container:hover .img{
            width: 120px;
        }

        #container .img:hover {
            width: 720px;
        }


    </style>
</head>
<body>
<div class="container" id="container">
    <div class="img"><img src="img1.jpg" alt="">
        <div class="text">
            功夫熊猫<br><br>
            《功夫熊猫》是一部以中国功夫为主题的美国动作喜剧电影，影片以中国古代为背景，其景观、布景、服装以至食物均充满中国元素。故事讲述了一只笨拙的熊猫立志成为武林高手的故事。该片由约翰·斯蒂芬森和马克·奥斯本执导，梅丽·莎科布制片。杰克·布莱克、成龙、达斯汀·霍夫曼、安吉丽娜·朱莉、刘玉玲、塞斯·罗根、大卫·克罗素和伊恩·麦西恩等配音。影片于2008年6月6日在美国上映。
        </div>
    </div>
    <div class="img"><img src="img2.jpg" alt="">
        <div class="text">
            飞屋环游记<br><br>
            《飞屋环游记》是由彼特·道格特执导，皮克斯动画工作室制作的第十部动画电影、首部3D电影。影片在2009年5月29日于美国正式上映。讲述了一个老人曾经与老伴约定去一座坐落在遥远南美洲的瀑布旅行，却因为生活奔波一直未能成行，直到政府要强拆自己的老屋时才决定带着屋子一起飞向瀑布，路上与结识的小胖子罗素一起冒险的经历。
        </div>
    </div>
    <div class="img"><img src="img3.jpg" alt="">
        <div class="text">
            赛车总动员 <br><br>
            《赛车总动员》是由皮克斯动画工厂制作，并由迪士尼于2006年发行的电脑动画电影。该片由约翰·拉塞特执导，并且由欧文·威尔逊、保罗·纽曼、邦妮·亨特等人配音演出，在2006年6月9日于美国、台湾上映，中国大陆上映日则为2006年8月22日。这是迪士尼和皮克斯的第七部动画长片，也是在迪士尼买下皮克斯之前，两家公司旧有合约下的最后一部电影。
            故事的主角是一部时髦拉风的赛车，梦想在Route 66道路上展开的赛车大赛中脱颖而出，成为车坛新偶像。但不料他在参赛途中却意外迷路，闯入一个陌生的城镇，展开一段超乎想像的意外旅程。
        </div>
    </div>
    <div class="img"><img src="img4.jpg" alt="">
        <div class="text">
            玩具总动员 <br><br>
            美国 1995年11月22日
            《玩具总动员》是皮克斯的动画系列电影，截止2015年共制作了三部，由华特·迪士尼影片公司和皮克斯动画工作室合作推出。
            讲述了主角两个玩具牛仔警长胡迪和太空骑警巴斯光年的故事。
        </div>
    </div>
    <div class="img"><img src="img5.jpg" alt="">
        <div class="text">
            机器人总动员 <br><br>
            同义词 机器人瓦力一般指机器人总动员（美国2008年安德鲁·斯坦顿执导动画电影）
            影片《机器人总动员》是2008年一部由安德鲁·斯坦顿编导的科幻动画电影。由皮克斯动画工作室进行制作，华特·迪士尼电影工作室电影公司负责发行。安德鲁·斯坦顿执导，本·贝尔特、艾丽莎·奈特和杰夫·格尔林等联袂献声配音。影片于2008年6月27日在美国上映。故事讲述了地球上的清扫型机器人瓦力偶遇并爱上了机器人夏娃后，追随她进入太空历险的一系列故事。影片的全球票房累计超过5.3亿美元，曾获得第81届奥斯卡最佳动画长片奖。
        </div>
    </div>
</div>
</body>
</html>